import React, { memo, useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom/index';

import './index.css';
import { SpanStyle, Top } from './style';
import { Icon } from './local';

export default memo(function Header() {
  const history = useHistory();
  const [isOnLine] = useState(window.navigator.onLine);
  const [isTop, setIsTop] = useState(false);
  const [currentIndex, setCurrentIndex] = useState(0);
  const { ipcRenderer } = window.require('electron');

  useEffect(() => {
    if (!isOnLine) {
      history.push('/main/offonline');
    }
  }, [isOnLine,history]);

  const winControlItemClick = (item, index) => {
    setCurrentIndex(index);
    history.push(item.path);
  };

  const closeWin = () => {
    ipcRenderer.send('closeWin');
  };
  const miniWin = () => {
    ipcRenderer.send('miniWin');
  };
  const onTop = () => {
    setIsTop(!isTop);
    !isTop ? ipcRenderer.send('onTop') : ipcRenderer.send('shutOnTop');
  };
  return (
    <div className='header flex-s' draggable='true'>
      <div className='winControl flex-s'>
        <div title='关闭' onClick={closeWin}></div>
        <div title='最小化' onClick={miniWin}></div>
        <Top
          TextColor={() => (!isTop ? '#adadadae' : '#ffffff')}
          title='置顶'
          onClick={onTop}
        ></Top>
      </div>
      <div className='routeControl flex-s'>
        {Icon.map((item, index) => {
          return (
            <SpanStyle
              SpanTextColor={() =>
                currentIndex === index ? '#42a5f5' : 'white'
              }
              key={item.icon}
              title={item.title}
              className={`iconfont ${item.icon}`}
              onClick={() => winControlItemClick(item, index)}
            ></SpanStyle>
          );
        })}
      </div>
    </div>
  );
});
